<%--
  Created by IntelliJ IDEA.
  User: 27716
  Date: 2024/10/24
  Time: 14:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改</title>
    <script src="../../static/js/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="../../static/css/css.css">
    <script>
        $(function (){
            //调用函数
            findById();
        })
        //定义回显方法 findById 更具id回显
        function findById(){
            //1.取值 2.组装对象 3.发起异步请求
            let uid = $("#uid").val();
            if(!uid){
                alert("用户id为空");
                return;
            }
            let obj = {uid:uid};
            $.ajax({
                url:"/user/findById",
                type:"post",
                data:{reqInfos:JSON.stringify(obj)},
                dataType:"json",
                success(res){
                    $("#username").val(res.username)
                    $("#password").val(res.password)
                    $("#time").val(res.time)
                    $("#img").attr("src","/file/showImg?imgUrl="+res.imgUrl)
                },
                error(){
                    alert("服务器故障");
                }
            })

        }
    </script>
</head>
<body>
<input type="hidden" value="${param.uid}" id="uid">
用户名： <input type="text" id="username"> <br>
密码： <input type="text" id="password"> <br>
入职时间： <input type="datetime-local" step="1" id="time"> <br>
<img src="" alt="" width="45" height="55" id="img">
<%--input type类型是文件类型 file 给id选择器 ,绑定改变事件 传参 this 表示选中的图片，--%>
<input type="file" id="file" onchange="showImg(this)">
<br>

<input type="button" value="修改" onclick="updAllUser()">
</body>
<script>

    function showImg(obj) {
        //1.获取选中的文件 2.创建阅读加载器（流）FileReader 3.利用流必须先读取图片的本地路径 4.根据选好的图片读取在img区域展示
        let file = obj.files[0];//获取第一个元素
        let fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = function () {
            $("#img").attr("src", this.result) //把读取的结果赋值 img区域
        }
        let formData = new FormData();
        let file = $("#file")[0].files[0];
        formData.append("file",file);
        $.ajax({
            url:"/file/upload",
            type:"post",//只要post支持二进制
            data:formData,//图片只能是二进制
            async:false,//不异步 同步 需要先服务器获取地址
            cache:false,//不缓存
            contentType:false,//不处理 编码
            processData:false,//不处理数据
            dataType:"json",
            success(res){
                console.log(res);
                imgUrl = res; //将服务器的图片路径 赋值给标签
            },
            error(){
                alert("服务器古装......");
            }
        })
    }
    //修改按钮
    function updAllUser(){
        let imgUrl = '';
        // //修改必须有id
        let uid = $("#uid").val();
        let username = $("#username").val();
        let password = $("#password").val();
        let time = $("#time").val();
        //1.创建formdata对象（二进制） 2.获取选择的图片 3.将图片添加到fromdata上
        let formData = new FormData();
        let file = $("#file")[0].files[0];
        formData.append("file",file);
        $.ajax({
            url:"/file/upload",
            type:"post",//只要post支持二进制
            data:formData,//图片只能是二进制
            async:false,//不异步 同步 需要先服务器获取地址
            cache:false,//不缓存
            contentType:false,//不处理 编码
            processData:false,//不处理数据
            dataType:"json",
            success(res){
                console.log(res);
                imgUrl = res; //将服务器的图片路径 赋值给标签
            },
            error(){
                alert("服务器古装......");
            }
        })
        if(!uid||!username || !password ||!time||!imgUrl){
            alert("数据不能为空")
            return;
        }

        let obj = {uid:uid,username:username,password:password,time:time,imgUrl:imgUrl};
        //发起异步请求
        $.ajax({
            url:"/user/updUser",
            type: "post",
            data:{reqInfos:JSON.stringify(obj)},
            dataType: "json",
            success(res) {
                console.log(res)
                if(res===200){
                    alert("修改成功");
                    location.href = "list.jsp";
                }
            },
            error() {
                alert("服务器故障")
            }
        })

    }
</script>
</html>
